<template>
  <EnteringForm
    ref="enteringForm"
    v-bind="dialog"
		width="60%"
    @close="close"
    @submit="submit"
  >
    <el-form ref="formRef" :model="queryParams" :rules="rules" label-width="120px">
      <el-row type="flex" style="flex-wrap: wrap">
        <el-col :xs="24" :sm="12" :lg="12">
          <el-form-item label="所属店铺" prop="sellerId">
            <el-select
							v-model="queryParams.sellerId"
							placeholder="请选择"
							style="width: 100%"
						>
							<el-option :label="item.name" :value="item.id" v-for="item in shopList" :key="item.id"/>
						</el-select>
          </el-form-item>
        </el-col>
				<el-col :xs="24" :sm="12" :lg="12">
          <el-form-item label="商品名称:" prop="name">
            <el-input
              v-model.trim="queryParams.name"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="12">
					<el-form-item label="成本价:" prop="cost">
						<el-input-number
							style="width:100%"
							controls-position="right" 
							:precision="2"
							:min="0"
							:max="99999999"
							v-model.trim="queryParams.cost"
							placeholder="请输入"
							clearable
						/>
					</el-form-item>
				</el-col>
        <el-col :xs="24" :sm="12" :lg="12">
					<el-form-item label="售价:" prop="price">
						<el-input-number
							style="width:100%"
							controls-position="right" 
							:precision="2"
							:min="0"
							:max="99999999"
							v-model.trim="queryParams.price"
							placeholder="请输入"
							clearable
						/>
					</el-form-item>
				</el-col>
        <el-col :xs="24" :sm="12" :lg="12">
					<el-form-item label="划线价:" prop="marketPrice">
						<el-input-number
							style="width:100%"
							controls-position="right" 
							:precision="2"
							:min="0"
							:max="99999999"
							v-model.trim="queryParams.marketPrice"
							placeholder="请输入"
							clearable
						/>
					</el-form-item>
				</el-col>
        <el-col :xs="24" :sm="12" :lg="12">
					<el-form-item label="销量:" prop="sellCount">
						<el-input-number
							style="width:100%"
							controls-position="right" 
							:precision="0"
							:min="0"
							:max="99999999"
							v-model.trim="queryParams.sellCount"
							placeholder="请输入"
							clearable
						/>
					</el-form-item>
				</el-col>
        <el-col :xs="24" :sm="12" :lg="12">
					<el-form-item label="排序:" prop="sort">
						<el-input-number
							style="width:100%"
							controls-position="right" 
							:precision="0"
							:min="0"
							:max="99999999"
							v-model.trim="queryParams.sort"
							placeholder="请输入"
							clearable
						/>
					</el-form-item>
				</el-col>
        <el-col :xs="24" :sm="12" :lg="12">
					<el-form-item label="赠送积分:" prop="integral">
						<el-input-number
							style="width:100%"
							controls-position="right" 
							:precision="0"
							:min="0"
							:max="99999999"
							v-model.trim="queryParams.integral"
							placeholder="请输入"
							clearable
						/>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="24" :lg="24">
          <el-form-item label="商品简介:" prop="blurb">
            <el-input
              v-model.trim="queryParams.blurb"
							:rows="3"
							type="textarea"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
				<el-col :xs="24" :sm="12" :lg="12">
					<el-form-item label="上架状态:" prop="enable">
						<el-radio-group v-model="queryParams.enable">
							<el-radio :label="1">上架</el-radio>
							<el-radio :label="0">下架</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :lg="12">
					<el-form-item label="是否推荐:" prop="recommend">
						<el-radio-group v-model="queryParams.recommend">
							<el-radio :label="1">推荐</el-radio>
							<el-radio :label="0">不推荐</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<div style="margin-bottom: 10px;margin-left: 30px">
						<div style="background-color: #efefef; padding: 8px;margin: 20px 0 0px 0; font-size: 14px; font-weight: bold;">属性</div>
						<!-- 顶部设置属性 -->
						 <!-- {{ queryParams.attrTempList }} -->
						<div style="width:100%; min-height:300px;overflow-y:auto; padding:15px;border:2px solid #e9e9e9">
								<div v-for="(item, index) in queryParams.attrTempList" :key="index" style="margin-bottom:20px;position: relative;">
									<el-button 
										style="position:absolute; top:0; right:0;" 
										size="mini" 
										icon="delete"
										type="info"
										@click="queryParams.attrTempList.splice(index, 1)"
										v-if="index > 0"
									>
										删除属性
									</el-button>
									<div>
										<span 
											style="font-size: 12px;color:#555;font-weight: bold;">属性名：</span> <el-input size="mini" style="width: 100px;" v-model="item.name" type="text"/>
									</div>
									<div>
										<span style="font-size: 12px;color:#555;font-weight: bold;">属性值：</span> <span 
												class="valueItem"
												v-for="(valueItem, valueIndex) in item.value" 
												:key="valueIndex"
												style="display: inline-block;position: relative;margin-top:20px;margin-right: 20px;"
										>
											<el-input size="mini" style="width: 100px;" v-model="item.value[valueIndex]" type="text"/>
											<!-- 删除按钮 -->
											<img
													src="https://img2.baidu.com/it/u=666935882,58434125&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
													style="width: 13px; height: 13px; position: absolute; top: -6px; right: -6px;display: none;cursor: pointer;"
													class="hoverStyle"
													alt=""
													@click="item.value.splice(valueIndex, 1)"
													v-if="valueIndex>0"
											/>
											<i 
												class="el-icon-error"
												style="width: 13px; height: 13px; position: absolute; top: -6px; right: -6px;display: none;cursor: pointer;"
												@click="item.value.splice(valueIndex, 1)"
													v-if="valueIndex>0"
											></i>
										</span>
										<el-button :disabled="item.value.length>5" size="mini" type="warning" @click="()=>{item.value.push('')}">+ 新增属性值</el-button>
									</div>
									<el-divider></el-divider>
								</div>
								<div>
									<el-button :disabled="queryParams.attrTempList.length>=4" type="primary" size="mini" @click="addskuItem">新增属性项目</el-button>
								</div>
						</div>
					</div>
				</el-col>
        <el-col :xs="24" :sm="24" :lg="24">
					<!-- 11--{{ queryParams.cover }} -->
          <el-form-item label="商品封面图:" prop="cover">
            <ImageUpload
              v-model="queryParams.cover"
              :limit="1"
            />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="24">
          <!-- 22--{{ queryParams.images }} -->
          <el-form-item label="商品轮播图:" prop="images">
            <ImageUpload
              v-model="queryParams.images"
              :limit="6"
            />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="24">
          <el-form-item label="商品详情图:" prop="intro">
            <ImageUpload
              v-model="queryParams.intro"
              :limit="6"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </EnteringForm>
</template>

<script setup>
import { getCurrentInstance, reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import { 
  listPage as shopListApi  //店铺列表
} from '@/api/operates/shopList/index'
import { info, add, edit, changeStatusApi, changeRecommendApi } from '@/api/goods/seller.js'

const { proxy } = getCurrentInstance()
const emit = defineEmits(["success"]);
const dialogType = ref('')
const shopList = ref([])
const dialog = reactive({
  visible: false,
  title: "",
});
const rules = reactive({
  sellerId: [{ required: true, message: "请选择", trigger: "change" }],
  name: [{ required: true, message: "请输入", trigger: "blur" }],
  cost: [{ required: true, message: "请输入", trigger: "blur" }],
  blurb: [{ required: true, message: "请输入", trigger: "blur" }],
  price: [{ required: true, message: "请输入", trigger: "blur" }],
  marketPrice: [{ required: true, message: "请输入", trigger: "blur" }],
  sellCount: [{ required: true, message: "请输入", trigger: "blur" }],
  sort: [{ required: true, message: "请输入", trigger: "blur" }],
  integral: [{ required: true, message: "请输入", trigger: "blur" }],
  cover: [{ required: true, message: "请上传", trigger: "blur" }],
  images: [{ required: true, message: "请上传", trigger: "blur" }],
  intro: [{ required: true, message: "请上传", trigger: "blur" }],
	enable: [{ required: true, message: "请选择", trigger: "change" }],
  recommend: [{ required: true, message: "请选择", trigger: "change" }],
});
const queryParams = ref({
	enable: 1,
	recommend: 0,
	attrTempList: [
		{name:'', value:['']}
	],
})

function init(type, record){
  getShopList()
	dialogType.value = type
	dialogType.value=='add' ? dialog.title='新增' : dialog.title='编辑'
	dialog.visible = true
	// 如果是编辑，回显数据
	if(dialogType.value=='edit'){
		queryParams.value = { ...record };
		queryParams.value.attrTempList = record.attrJson ? record.attrJson : [
			{name:'', value:['']}
		]
	}
};

//新增属性名和属性值整体
function addskuItem(){
  queryParams.value.attrTempList.push({name:'', value:['']})
}

function getShopList(){
  shopListApi({}).then((res)=>{
    shopList.value = res.data.list
  })
}
function close(){
  dialog.visible = false;
  proxy.$refs.formRef.resetFields();
	queryParams.value = {
		enable: 1,
		recommend: 0,
		attrTempList: [
			{name:'', value:['']}
		],
	}
};
function submit() {
	if(!queryParams.value.attrTempList.length){
		return ElMessage.error('请填写属性')
	} else if(queryParams.value.attrTempList.some(i=>{return !i.name || !i.value.length || i.value.some(k=>!k)})){
		return ElMessage.error('请将属性填写完整')
	}
  proxy.$refs.formRef.validate((valid) => {
    if (valid) {
      let query = {
        ...queryParams.value,
        // attrJson: JSON.stringify(queryParams.value.attrTempList)
        attrJson: queryParams.value.attrTempList

        //attrJson: JSON.stringify({"颜色":["红色","黄色"],"尺码":['大']})
      }
			delete query.attrTempList
      if(dialogType.value=='add'){
				add(query).then((res) => {
					if (res.code == 200) {
						ElMessage.success("新增成功");
						close();
						emit("success",'add');
					} else {
						ElMessage.error(res.message || "新增失败");
					}
				});
			} else {
				edit(query).then((res) => {
					if (res.code == 200) {
						ElMessage.success("编辑成功");
						close();
						emit("success",'edit');
					} else {
						ElMessage.error(res.message || "编辑失败");
					}
				});
			}
    }
  });
}
defineExpose({ init });
</script>

<style scoped lang="scss">
  //.el-form-item {
   // display: inline-block !important;
  //}
  .valueItem:hover{
    &>img{
      display: block !important;
    }
  }
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>
